<template>
  <el-dialog :title="isEdit?'编辑货类':'新增货类'"
             :visible.sync="dialogForm"
             width="900px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="货类名称"
                        prop="cargoTypeName">
            <el-input v-model="form.cargoTypeName"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="货类编码"
                        prop="cargoTypeCode">
            <el-input v-model="form.cargoTypeCode"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="货类颜色"
                        prop="color">
            <el-color-picker v-model="form.color"
                             show-alpha
                             :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注"
                        prop="remark">
            <el-input type="textarea"
                      v-model="form.remark"
                      :rows="3"
                      style="width: 600px"
                      placeholder="请输入内容"
                      :maxLength="$maxLength"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCargo, updateCargo } from '@/api/things/cargo'
import { PUBLIC_CHINESE, PUBLIC_CAP_NUM } from '@/utils/Reg'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'addCargoForm',
  data() {
    return {
      form: this.clearForm(),
      rules: {
        cargoTypeName: [
          { required: true, validator: PUBLIC_CHINESE, trigger: 'blur' },
          sortLength
        ],
        cargoTypeCode: [
          { required: true, validator: PUBLIC_CAP_NUM, trigger: 'blur' }
        ],
        remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      //颜色选择器
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  methods: {
    clearForm() {
      return {
        cargoTypeName: '', //货类名称
        cargoTypeCode: '', //货类代码
        color: 'rgba(255, 69, 0, 0.68)', //货类颜色
        remark: '' //备注
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addCargo(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateCargo(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
